// Native app styles
html.native {
  // Fill up space
  #content-vue {
    margin-top: 0 !important;
    height: 100vh !important;
  }

  // Native app has no header
  header#header {
    display: none !important;
  }

  // Pass through to the element below
  &,
  body {
    background: transparent !important;
  }

  body.viewer-fully-opened.viewer-video {
    // Hide main content when playing a video,
    // so we can pass through to the native video player.
    // The photoswipe element is outside the main content,
    // so the controls will still be visible.
    #app-content-vue {
      // scroller cursors have transitions on visibility
      // so we also need to set opacity to 0
      visibility: hidden;
      opacity: 0;
    }

    // Hide the background to be transparent for ExoPlayer
    .pswp__bg {
      display: none;
    }

    // Hide the active slide
    .pswp__item.active {
      display: none !important;
    }
  }
}
